<template>
  <div class="wrap">
    <div class="head">
      <div class="bespeak">
        <img :src="srcUrl" alt>
        <span :style="colors">1、预约门店及时间</span>
      </div>
      <div class="edit">
        <img :src="srcs" alt>
        <span :style="colored">2、编辑活动信息</span>
      </div>
    </div>
    <an-name @go-edit="goEdit" :form="forms" v-show="active === 0"></an-name>
    <edit-surver @go-bespeak="goBespeak" :form="forms" v-show="active === 1"></edit-surver>
  </div>
</template>
<script>
import anName from "./addAc-name.vue";
import editSurver from "./addAc-edit.vue";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  components: {
    anName,
    editSurver
  },
  data() {
    return {
      active: 0,
      srcUrl: require("../../images/main/nav-f.png"),
      srcs: require("../../images/main/nav-r.png"),
      colors: "color: white",
      colored: "color: #085dab",
      forms: {
        activityPrice: 0,
      },
      newForm: {},
      isEdit:false,

      // 路由传参
      params: this.$route.query && this.$route.query.p ? this.decodeJson ( this.$route.query.p ) : {}
    };
  },
  mounted: function() {
    if(!this.params.activityId || this.params.again) {
      return false
    }
    this.axios({
        method: "post",
        url: `activity/selectDateils`,
        data: qs.stringify({
          // id: this.$route.query.activityId
          id: this.params.activityId
        })
      }).then(res => {
        // confirm.log(res.data.data);
        delete res.data.data.closingTime;
        // confirm.log(res.data.data);

        this.newForm = res.data.data;
        this.$set(this.newForm ,"time", res.data.data.endTime);
        this.$set(this.newForm ,"startTime", res.data.data.activityTime);
        this.$set(this.newForm ,"age", res.data.data.age);
        // this.newForm.endTime = new Date(res.data.data.endTime);
        
        this.forms = res.data.data;
        this.$set(this.forms ,"time", res.data.data.endTime);
        this.$set(this.forms ,"startTime", res.data.data.activityTime);
        this.$set(this.forms ,"age", res.data.data.age);
        // that.forms.activityTime = new Date(res.data.data.activityTime);
        // that.forms.endTime = new Date(res.data.data.endTime);
      });
  },
  methods: {
    // 赋值时改日期格式
    formatDateTime(inputTime) {
      var date = new Date(inputTime);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "年" + m + "月" + d + "日" + h + ":" + minute + ":" + second;
    },
    // 接收子组件得事件
    goEdit: function(val) {
      this.newForm = val;
      this.active = 1;
      this.editFun(1);
    },
    goBespeak: function(val) {
      this.active = 0;
      this.forms = val;
      this.bespeak(0);
    },
    // 门店
    bespeak: function(num) {
      this.active = num;
      this.srcUrl = require("../../images/main/nav-f.png");
      this.srcs = require("../../images/main/nav-r.png");
      this.colors = "color: white";
      this.colored = "color: #085dab";
    },
    // 编辑
    editFun: function(num) {
      this.active = num;
      this.srcs = require("../../images/main/a.png");
      this.srcUrl = require("../../images/main/b.png");
      this.colored = "color: white";
      this.colors = "color: #085dab";
    }
  },
};
</script>
<style scoped>
.wrap{
  width: 90%;
  margin: 40px auto;
}
.head {
  /* width: 1200px; */
  width: 60%;
  height: 60px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-top: 74px;
  /* margin-left: 262px; */
}
.bespeak {
  cursor: pointer;
  /* width: 580px; */
  width: 48%;
  height: 60px;
  left: 0;
  background-size: cover;
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
}
.bespeak img {
  position: absolute;
  z-index: -999;
  left: 0;
  /* width: 710px; */
  height: 60px;
}
.edit img {
  position: absolute;
  z-index: -999;
  right: 0;
  width: 100%;
  /* width: 620px; */
  height: 60px;
}
.edit {
  cursor: pointer;
  /* width: 620px; */
  width: 58%;
  height: 60px;
  position: absolute;
  right: 0;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
}
</style>
